<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-runoob:hello.a.b="message">
</div>
<p>
    {{ message }}
</p>
<script>
    Vue.directive('runoob', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify

            el.innerHTML =
                'name: ' + s(binding.name) + '<br>' +
                'value: ' + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: ' + s(binding.arg) + '<br>' +
                'modifiers: ' + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            message: '菜鸟教程!'
        }
    })
</script>
</body>
</html>